<script setup>
import {
  ref,
  getCurrentInstance,
  watch,
  onMounted,
  defineEmits,
  defineModel,
  defineExpose,
  computed,
  inject,
} from 'vue'

const props = defineProps({
  ase: {
    type: String,
    required: true,
    default: 'cls',
  },
  msg: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
})
const isActive = ref(true)
let clsaaO = 'kl'
const objectAttrs = {
  style: 'color:red',
  id: 'op',
  class: 'ko',
}

const emit = defineEmits(['add1'])
const add1 = () => {
  emit('add1', { a: 1 })
}
const objectFc = ref({
  id: 0,
  state: {
    a: 0,
  },
})

const modelOne = defineModel('modelOne')
const firstName = defineModel('firstName')
const secoundName = defineModel('secoundName')
const updateOne = () => {
  firstName.value++
  secoundName.value += '1i'
}
watch(
  objectFc,
  (news, odl) => {
    console.log(news)
  },
  {
    deep: true,
    immediate: true,
    once: true,
  },
)
const injectvalue = inject('injectvalue')
const computedVlue = computed(() => {
  return objectFc.value.id + objectFc.value.state.a
})
const shows = () => {
  console.log(9999)
  objectFc.value.id += 1
  objectFc.value.state.a += 9
}
const classComputed1 = computed(() => {
  return {
    active: objectFc.value.id == 2,
    text: true,
  }
})
onMounted(() => {})
defineExpose({
  shows,
})
</script>

<template>
  <div class="greetings">
    {{ injectvalue }}90
    {{ props.ase }}
    {{ props.msg }}
    <div :class="classComputed1">
      {{ computedVlue }}
      {{ objectFc.id }}
      {{ objectFc.state.a }}
    </div>
    {{ firstName }}
    {{ secoundName }}
    <div @click="updateOne">kooooo</div>
    <input type="text" v-model="modelOne" />
    <div v-bind="objectAttrs">
      <span @click="add1" :class="`${clsaaO}iii`">点击</span>
      {{ isActive ? '1' : 5 }}
    </div>
  </div>
</template>

<style scoped>
.ko {
  font-size: 20px;
}

h1 {
  font-weight: 500;
  font-size: 2.6rem;
  position: relative;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>
